<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-grid cols="2" x-gap="24">
            <n-gi>
                <n-card title="基本信息">
                    <n-form-item label="上级部门" path="pid">
                        <jb-tree-select
                            v-model:value="form.pid"
                            clearable
                            url="/api/admin/dept/datas?pid=0"
                            check-strategy="all"
                            :show-path="true"
                        ></jb-tree-select>
                    </n-form-item>
                    <n-form-item label="部门名称" path="name">
                        <n-input
                            v-model:value="form.name"
                            placeholder="请输入部门名称"
                            maxlength="40"
                        />
                    </n-form-item>
                    <n-form-item label="部门全称" path="fullName">
                        <n-input
                            v-model:value="form.fullName"
                            placeholder="请输入部门全称"
                            maxlength="40"
                        />
                    </n-form-item>
                    <n-form-item label="部门代码" path="sn">
                        <n-input
                            v-model:value="form.sn"
                            placeholder="请输入部门代码"
                            maxlength="40"
                        />
                    </n-form-item>
                    <n-form-item label="部门类型" path="type">
                        <jb-radio-group
                            v-model:value="form.type"
                            url="/api/admin/dictionary/options?typeKey=dept_type"
                        ></jb-radio-group>
                    </n-form-item>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card title="详细信息">
                    <n-form-item label="负责人" path="leader">
                        <n-input v-model:value="form.leader" placeholder="负责人" />
                    </n-form-item>
                    <n-form-item label="邮政编码" path="zipcode">
                        <n-input v-model:value="form.zipcode" placeholder="邮政编码" />
                    </n-form-item>
                    <n-form-item label="电子邮箱" path="email">
                        <n-input v-model:value="form.email" placeholder="电子邮箱" />
                    </n-form-item>
                    <n-form-item label="联系地址" path="address">
                        <n-input v-model:value="form.address" placeholder="联系地址" />
                    </n-form-item>
                    <n-form-item label="联系电话" path="phone">
                        <n-input v-model:value="form.phone" placeholder="联系电话" />
                    </n-form-item>
                    <n-form-item label="备注信息" path="remark">
                        <n-input
                            v-model:value="form.remark"
                            type="textarea"
                            placeholder="备注信息"
                        />
                    </n-form-item>
                </n-card>
            </n-gi>
        </n-grid>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
        pid?: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface DeptType {
    id: string
    name: string
    pid: string
    fullName: string
    sn: string
    type: string
    leader: string
    zipcode: string
    email: string
    address: string
    phone: string
    remark: string
}
const form = useResetableData<DeptType>({
    id: '',
    pid: '0',
    name: '',
    fullName: '',
    sn: '',
    type: '1',
    leader: '',
    zipcode: '',
    email: '',
    address: '',
    phone: '',
    remark: ''
})
const rules: FormRules = {
    name: new Rules().required('请输入部门名称').value,
    fullName: new Rules().required('请输入部门全称').value,
    sn: new Rules().required('请输入部门代码').value,
    type: new Rules().required('请选择部门类型').value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id ? '/api/admin/dept/update' : '/api/admin/dept/save'

    let res = await JBoltApi.tryPost(url, form)
    await window.$success('保存成功')
    return res.data
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/dept/${props.id}`).then(({ error, result }) => {
        if (error) return
        form._reset(result.data)
    })
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
    if (props.pid) {
        form.pid = props.pid
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
